#main {
  height: 100vh;
  width: 100vw;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}


.pub_foot {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 2rem;
  max-height: 2rem;
  background: linear-gradient(to right, #ff5100, #ff8e00);
}

.pub_foot_sub{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 2rem;
  max-height: 2rem;
  background:#E4ECF4 ;
}



.pub_main{
  position: absolute;
  left: 0;
  top: 2rem;;
  width: 100%;
  .main_center{
    width: 100%;
    background: white;
    height: 12rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    span{
      position: relative;
      top: 5rem;
      color: #524848;
    }
  }

 .textarea_body{
   width: 100%;
   height: 12rem;
   background:#efeff4;
   text-align: center;
   .textarea{
     font-size: small;
     font-weight: bold;
     letter-spacing: 1px;
     text-align: center;
   }
   .textarea_big{
     width: 90%;
     height: 95%;
     border: none;
     margin-top: 5%;
     border-radius: 5px;
   }
   span{
      font-size: smaller;
     font-weight: bold;
     position: relative;
     top: -1rem;
     color: #6d6d72;
   }
   .warn{
     margin-top: 2rem;
     text-align: center;
     color: #ff5306;
     font-size: small;
     font-weight: bold;
   }
 }

  .introduce{

    width: 100%;

    .bigcell{
      min-height: 3.5rem;
      max-height: 3.5rem;
      border-bottom: 1px solid lightgray;
      background: white;
      font-family:  "Microsoft YaHei";
      text-align: left;
      .smallSpan{
        text-align: left;
        font-size: x-small;
        letter-spacing:1px;
        margin-top: 5px;
        font-weight: bold;
        color: #6d6d72;
      }
      .bigSpan{
        text-align: left;
        letter-spacing:1px;
        font-size: smaller;
        font-weight: bolder;

      }
      .rightSpan{
        float: right;
        font-size: xx-small;
        font-weight: bolder;
        position: relative;
        top: 10px;
        color: #6d6d72;
      }
    }
    .warncell{
      min-height: 3.5rem;
      max-height: 3.5rem;
      border: none;
      background: #efeff4;
      text-align: center;
      span{
        text-align: center;
        color: #ff5306;
        font-size: small;
        font-weight: bold;
      }
    }

  }



  .mui-content{
    background: #EFEFF4;
    .marrow{
      background: #EFEFF4;
      .basicCell{
        background: white;
        height:  2.5rem;
        .bigSpan{
          position: absolute;
          top: 30%;
          font-size: medium;
          font-weight: bold;
        }
        .span_right{
          position: absolute;
          right: 2rem;
          input{
            width: 5rem;
            border: none;
            text-align: right;
            font-size: small;
          }
        }

        .span_small{
          font-weight: bold;
          font-size: small;
          color: #929292;

        }
        .span_xsmall{
          font-size: x-small;
          position: absolute;
          right: 1rem;
          top: 30%;
        }
        .bedspan_l{
          font-size: smaller;
          font-weight: bolder;
          color: #6d6d72;
          position: absolute;
          left: 10px;

        }
        .bedspan_m{
          font-size: smaller;
          font-weight: bolder;
          color: #6d6d72;
          position: absolute;
          left: 40%;

        }
        .bedspan_r{
          font-size: smaller;
          font-weight: bolder;
          color: #6d6d72;
          position: absolute;
          right: 10px;

        }
      }

      .cirli{
        text-align: center;
        border-radius: 1.5rem;
        width: 90%;
        margin: 0.5rem 0  0.5rem 0;
        height:90% ;
        position: relative;
        left: 5%;
        border: none;
        box-shadow: 2px 2px 3px #6d6d72;
      }
      .nonebed{
        font-size: smaller;font-weight: bold;color: #8f8f94
      }

      .infraCell{
        background: white;
        height:  2rem;
        .span_left{
          position: absolute;
          top: 20%;
          font-size: small;
          font-weight: bolder;
          input{
            border: none;
          }
        }
        .span_medio{
          position: absolute;
          top: 20%;
         margin-left: 3rem;
          font-size: small;
          font-weight: bolder;
          input{
            border: none;
            width: 5rem;
            height: 1rem;
            font-size: x-small;
          }
        }
        .span_right{
          position: absolute;
          top: 20%;
          right: 1rem;
          font-size: small;
          font-weight: bolder;
          color: #656565;
          span{
            width: 4rem;
            text-align: right;
          }
          input{
            border: none;
            width: 6rem;
            height: 1rem;
            font-size: small;
            text-align: right;
          }
        }
        .span_width{
          width: 5rem;
          text-align: right;
        }
        .samll{font-size: small}
        .infra_check{
          width: 16px;
          height: 16px;
        }

      }
      .groupCell{
        height:  2rem;
        font-size: larger;
        font-weight: bold;
        margin:0;
        color: #929292;
        .small{
          font-size: x-small;
        }
      }
      .textcell{
        width: 90%;
        text-align: center;
        position: absolute;
        left: 5%;
        .bigspan{
          font-size: medium;
          font-weight: bold;
          margin: 1rem 0 1rem 0;
        }
        .smallspan{
          font-size: xx-small;
          color: #8f8f94;
          font-weight: bold;
        }
      }
      .small{
        font-size: medium;
      }
      .big{
        height: 3rem;
      }
    }
    .marrow{
      margin-bottom: 2rem;
    }
    .center{
      text-align: center;
    }
  }


  .main_body{
    width: 100%;
    background: white;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    .content{
      position: relative;
      left: 0;
      top: 3rem;;
      width: 100%;
      border-top: 1rem solid #EFEFF4;
      .bigcell{
        min-height: 3.5rem;
        max-height: 3.5rem;
        border-bottom: 1px solid lightgray;
        background: white;
        font-family:  "Microsoft YaHei";
        text-align: left;
        .smallSpan{
          text-align: left;
          font-size: x-small;
          letter-spacing:1px;
          margin-top: 5px;
          font-weight: bold;
        }
        .bigSpan{
          text-align: left;
          letter-spacing:1px;
          font-weight: bolder;
        }
        .rightSpan{
          float: right;
          font-size: xx-small;
          font-weight: bolder;
          position: relative;
          top: 10px;
        }
      }

    }
    .top_1rem{
      top: 1rem;
    }
    .bk_content{
      position: relative;
      left: 0;
      top: 3rem;;
      width: 100%;
      border-top: 1rem solid #efeff4;
      height: 5rem;
      background: rgba(239, 239, 244, 0.22);
      span{
        font-weight: bold;
        font-size: smaller;
      }
      .orange{
        color: orange;
      }
      .spanCheck{
        width: 12px;
        height: 12px;
        border: 2px solid grey;

      }
    }

  }

  .title_type1 {
    position: absolute;
    left: 20px;
    top: 1rem;;
    width: 80%;
    font-size: larger;
  }
  .title_type2 {
    .title_span{
      position: relative;
      left: 30px;
    }
    position: absolute;
    left: 0;
    top: 12rem;;
    width: 100%;
    font-size: larger;
    overflow: hidden;
    .house_varity{
      margin-top: 20px;
      width:100rem ;
      background: white;
      min-height: 2.5rem;
      max-height: 2.5rem;
      input{
          border: none;
      }
    }
  }
  .content{
    position: absolute;
    left: 0;
    top: 3rem;;
    width: 100%;
    .mui-table-view-cell{

      min-height: 3.5rem;
      max-height: 3.5rem;
      font-family:  "Microsoft YaHei";
      border-bottom: 1px solid lightgray;
      background: white;
      .small{
        font-size: small;
        letter-spacing:1px;
        margin-top: 10px;
        font-weight: bold;
        color: #868080
      }
      .big{
        font-size:large;
        letter-spacing:4px;
        font-weight: bolder
      }
      .cell-radio{
        width: 20px;height: 20px;
        border: 2px solid rgba(82, 72, 72, 0.97);
        border-radius: 10px;
        position: relative;
        top: 10px;
        float: right;

      }
    }
  }


    .main_map{
      width: 100%;
      background: whitesmoke;
      height: 13rem;
  }


  .pub_location{

    .pub_location_title{
      width: 80%;
      height: 1.5rem;
      background: #efeff4;
      margin: 5px 0 5px 20px;
    }
    .location_content{
      background-color: white;
      .mui-content{
        background-color: white;
        .mui-row{
          .mui-table-view-cell{
            min-height: 2.5rem;
            max-height: 2.5rem;
            font-family:  "Microsoft YaHei" ! important;
            .location_input{
              border: none;
              font-weight:bolder;
              width: 80%;
            }
            .halfinput{
              width: 45%;
            }
            input::-webkit-input-placeholder{
              color: #ababab;opacity:1;
            }
          }
        }
      }
    }
    .span_label{
      margin: 10px 0 10px 30px;
      font-weight: bold;
      font-size: smaller;
    }
  }


  .addimg-big{
    overflow: hidden;
    width: 100%;
    background: whitesmoke;
    height: 13rem;
    text-align: center;
    .title{
      margin-top: 3rem;
      color: #929292;
    }
    .button_div{
      color: #221d32;
      width: 100%;
      span{

        font-size: small;
        height: 1.5rem;
      }

      position: fixed;
    top: 13rem;
      input{
        border: none;
        font-size: small;
        font-weight: bold;
        width: 80%;
        height: 1.5rem;
      }
    }
    .addimg_shu{
      width:100%;
      height: 100%;
      transition: 800ms;
    }

    .addimg_heng{
      width: 100%;
      height: 100%;
      transition: 800ms;
    }


  }





  .addimg-sma{
    width: 100%;
    height:auto ;

    .addimg_div{
      width: 3rem;height: 3rem;
      background: white;
      //border: 1px solid #ff9913;
      margin: 0.5rem;
      border-radius: 2px;
      text-align: center;
      font-size: larger;
      float: left;

      span{
        margin-top: 1rem;
      }
    }
    img{
      width: 3rem;height: 3rem;
      margin: 0.5rem;;
      border-radius: 2px;
    }

  }

  .addimg-rule{
    float: none;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    .orange{
      color: orange;
      font-size: small;
      font-weight: bolder;
    }
  }

  .bounce_mask{
    background: white;
    width: 80%;
    height: 80%;
    position: fixed;
    top: 10%;
    left: 10%;
    border-radius: 20px;

    .mask_top{
      width: 100%;
      height: 85%;
      margin-top: 20px;
      h2{
        font-size:larger;
        text-align: center;
      }
      .red{
        font-size: xx-small;
        color: red;
      }
      p{
        margin:5px  20px 5px 20px ;
        color: #4c4c51;
        font-size: small;
        font-weight: bold;
      }
    }
    .mask_bottom{
      width: 90%;
      height: 10%;
      position: absolute;
      left: 5%;
      border-top: 1px solid orange;
      text-align: center;
      span{
        color: orange;
        margin-top: 1rem;

      }
    }

  }


  .mui-slider{
    .mui-slider-group{
      .mui-slider-item{
        .sliderBody{
          height: 15rem;
          width: 100%;
          text-align: center;
          .sliderTitle{
            margin: 2.5rem 0 1rem 0;
            font-size: x-large;
          }
          .sliderSmall{
            font-size: smaller;
            font-weight: bold;
            margin-bottom: 2rem;
            letter-spacing:1px;
          }
          .sliderSmaller{
            font-size: smaller;
            color: #929292;
            font-weight: bold;
            letter-spacing:2px;
          }
          .sliderpoint{
            span{
              width: 12px;height: 12px;
              background: grey;
              border-radius: 6px;
              margin: 2rem 1rem 0 1rem;
            }
            .orange{
              background: orange;
            }
            .toimgbtn{
              margin-top: 2rem;
              width: 3rem;
            }
          }
        }
      }
    }
  }
}